<template>
  <div id="exportPersonal" style="width: 100%">
    <div class="textCenter">
      <div
        style="
          margin-bottom: 50px;
          font-size: 30px;
          font-weight: bold;
          margin-bottom: 50px;
          color: #1e9fff;
        "
      >
        个人测评报告
      </div>
    </div>
    <div>
      <div class="headerCss">基本信息</div>
      <table border="1" class="table_style">
        <tbody>
          <tr>
            <td class="minWidth">登录名</td>
            <td class="minWidth">{{ headerData.account }}</td>
            <td class="minWidth">姓名</td>
            <td class="minWidth">{{ headerData.realName }}</td>
            <td class="minWidth">性别</td>
            <td class="minWidth">
              {{ headerData.sex == 1 ? "男" : headerData.sex == 2 ? "女" : "" }}
            </td>
            <td class="minWidth">年龄</td>
            <td class="minWidth">
              {{ headerData.age == -1 ? "" : headerData.age }}
            </td>
            <td class="minWidth">年级</td>
            <td class="minWidth">
              {{ headerData.gradeName }}
            </td>
            <td class="minWidth">班级</td>
            <td class="minWidth">
              {{ headerData.classno }}
            </td>
          </tr>
          <tr>
            <td colspan="2">测验工具</td>
            <td colspan="4">{{ headerData.tool }}</td>
            <td colspan="3">测验用时(秒)</td>
            <td colspan="3">{{ headerData.duration }}</td>
          </tr>
          <tr>
            <td colspan="2">测验日期</td>
            <td colspan="4">{{ headerData.startDate }}</td>
            <td colspan="3">测评次数</td>
            <td colspan="3">{{ headerData.count }}</td>
          </tr>
          <tr v-for="(info, index) in infoList" :key="index" v-show="false">
            <td class="minWidth" v-if="index % 3 == 0">
              {{ infoList[index].subject }}
            </td>
            <td class="minWidth" v-if="index % 3 == 0">
              {{ infoList[index].selectAnswer }}
            </td>
            <td class="minWidth" v-if="index % 3 == 0">
              {{ infoList[index + 1] ? infoList[index + 1].subject : "" }}
            </td>
            <td class="minWidth" v-if="index % 3 == 0">
              {{ infoList[index + 1] ? infoList[index + 1].selectAnswer : "" }}
            </td>
            <td colspan="2" class="minWidth" v-if="index % 3 == 0">
              {{ infoList[index + 2] ? infoList[index + 2].subject : "" }}
            </td>
            <td colspan="2" class="minWidth" v-if="index % 3 == 0">
              {{ infoList[index + 2] ? infoList[index + 2].selectAnswer : "" }}
            </td>
          </tr>
          <!-- <tr>
              <td>部门</td>
              <td colspan="3">{{ headerData.deptName }}</td>
              <td>职务</td>
              <td colspan="3">{{ headerData.postName }}</td>
            </tr> -->
        </tbody>
      </table>
    </div>
    <!-- <br />
    <div>
      <div class="headerCss">测验结果</div>
      <table border="1" class="table_style">
        <tbody>
          <tr>
            <td>测验工具</td>
            <td>{{ headerData.tool }}</td>
            <td>测验用时(分钟)</td>
            <td>{{ headerData.duration }}</td>
          </tr>
          <tr>
            <td>测验日期</td>
            <td>{{ headerData.startDate }}</td>
            <td>测评次数</td>
            <td>{{ headerData.count }}</td>
          </tr>
        </tbody>
      </table>
    </div> -->
    <br />
    <div>
      <div class="headerCss">测评介绍</div>
      <div style="border: 1px solid gainsboro">
        <span style="padding: 10px; display: inline-block">
          {{ headerData.introduce }}</span
        >
        <!-- <div class="explain" style="padding-bottom: 10px; margin: 0 10px">
          一个人的职业倾向和职业兴趣，一般来说没有绝对的好坏之分。每个人的兴趣，一般都有最适合他的职业。我们要想在学习和工作中获得成功，很重要的一点，就是在选择工作的时候，尽量从事最适合我们的工作。实际上，我们在升学报考专业或毕业找工作，以及考虑转换工作的时候，首先应该对我们自身的职业倾向进行全面深入的了解。本测评项目的目的，就是为了帮助您更加准确全面的了解您的职业倾向特点，为您在规划自己的学业生涯和未来职业生涯时提供一个有益的参考，拓宽您在职业选择方面的思路。
        </div> -->
      </div>
    </div>
    <br />
    <div v-if="headerData.tool">
      <div class="headerCss">
        {{
          headerData.tool.indexOf("霍兰德专业倾向测评量表") == -1
            ? "因子得分"
            : "测评结果"
        }}
      </div>

      <table border="1" class="table_style">
        <tbody>
          <tr>
            <td class="minWidth">因子名称</td>
            <td
              class="minWidth"
              v-if="headerData.tool.indexOf('霍兰德专业倾向测评量表') == -1"
            >
              因子结论
            </td>
            <td class="minWidth">
              {{
                headerData.tool.indexOf("霍兰德专业倾向测评量表") == -1
                  ? "因子得分"
                  : "测评结果"
              }}
            </td>
          </tr>
          <tr v-for="(item, index) in data" :key="index">
            <td class="minWidth">{{ item.factorName }}</td>
            <td
              class="minWidth"
              v-if="headerData.tool.indexOf('霍兰德专业倾向测评量表') == -1"
            >
              {{ item.totalRemark }}
            </td>
            <td class="minWidth" v-if="item.factorName == '霍兰德代码'">
              {{ item.totalRemark }}
            </td>
            <td class="minWidth" v-else>{{ item.score }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <div>
        <span
          class=""
          style="
            font-size: 20px;
            margin-top: 5px;
            margin-left: 20px;
            display: inline-block;
          "
        ></span>
      </div>
      <div id="echarts_box" style="height: 400px"></div>
      <div v-if="factor.length">
        根据测评结果，您得分最高所属的职业和人格类型是:{{
          factor[0].factorName
        }}。以下是该类型的性格特点以及相应的职业特点。不同类型之间并无好坏之分。
      </div>
    </div>
    <br />
    <div v-if="sortListData.length">
      <div v-for="item in factor" :key="item.count">
        <!-- v-if="item.factorName == sortListData[0].name" -->
        <div style="border: 2px solid gainsboro; margin-bottom: 20px">
          <div class="titleCss">
            <span
              class=""
              style="font-size: 20px; margin-top: 5px; display: inline-block"
              >【{{ item.factorName }}】</span
            >
          </div>
          <div>【得分解释】</div>
          <div
            style="padding: 15px; line-height: 20px"
            v-html="item.explainRemark"
          ></div>
          <div>【辅导意见】</div>
          <div style="padding: 15px" v-html="item.suggest"></div>
        </div>
      </div>
    </div>
    <div v-if="sortListData.length">
      <!-- <div v-if="sortListData.length">
        根据测评结果，您得分前三项为:{{
          code
        }},以下是该类型可能适合你的职业兴趣。不同类型之间并无好坏之分。
      </div> -->
      <div v-for="item in data" :key="item.count">
        <div
          v-if="item.factorName == '霍兰德专业倾向测评量表'"
          style="border: 1px solid gainsboro; margin-bottom: 20px"
        >
          <div class="titleCss">
            <span
              class=""
              style="font-size: 20px; margin-top: 5px; display: inline-block"
              >【{{ item.factorName }}】</span
            >
          </div>
          <div>【得分解释】</div>
          <div style="padding: 15px" v-html="item.explainRemark"></div>
        </div>
      </div>
    </div>
    <br />
    <div class="text">
      <div>
        每个人的职业兴趣都是非常相对复杂的，同时在答题时，难免受到当时的答题环境、心情等各种因素的影响。如果您觉得最终的测试结果与您的实际情况不是很符合，可能有如下几种原因：
      </div>
      <div>1、请回忆您答题时情形，您是根据自己的第一反应做出的回答吗？</div>
      <div>2、您是否受到自己应该选择什么或者别人希望您选择什么的影响？</div>
      <div>3、您答题的时候心情是不是比较放松？</div>
      <div>4、您答题的时候有没有受到干扰？</div>
      <div>
        最后，希望您通过本测试，能够更好的了解自己的职业倾向，客观、发展地认识自己，充分估计自己的发展潜能，从而在专业选择和择业过程中能够进行有意识的加以选择，并在学习、工作中扬长避短，最终在未来的职业生涯中获得最大的成功。
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonalReport } from "@/api/evaluation/personal";
import htmlToPdf from "@/util/htmlToPdf";
import * as echarts from "echarts";
export default {
  name: "exportPersonal",
  data() {
    // 和导出pdf没关系
    return {
      headerData: {
        dimId: "",
      },
      data: [],
      sortListData: [],
      infoList: [],
      codeInfo: "",
      list: [
        "现实型",
        "研究型",
        "艺术型",
        "社会型",
        "企业型",
        "常规型",
        "霍兰德代码",
      ],
      factor: [],
      code: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getBarChartInfo(xAxisData, seriesData) {
      var myChart = echarts.init(document.getElementById("echarts_box"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "111因子图表",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "因子图表",
            type: "bar",
            barWidth: 30,
            data: seriesData,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      });
    },
    getChartInfo(radarData, seriesData) {
      //雷达图
      var myChart = echarts.init(document.getElementById("echarts_box"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "因子图表",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: 40,
          containLabel: true,
        },
        legend: {
          data: ["职业倾向分布"],
        },
        radar: {
          // shape: 'circle',
          indicator: radarData,
          axisName: {
            color: "black",
          },
          nameGap: 3,
          startAngle: 150,
        },
        series: [
          {
            name: "职业倾向分布",
            type: "radar",
            barWidth: 60,
            data: [{ value: seriesData, name: "职业倾向分布" }],
            label: {
              show: true,
            },
          },
        ],
      });
    },
    getDashboard() {
      //仪表盘
      var chartDom = document.getElementById("echarts_box");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: "#FFAB91",
            },
            progress: {
              show: true,
              width: 30,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 30,
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: -20,
              color: "#999",
              fontSize: 20,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value} °C",
              color: "auto",
            },
            data: [
              {
                value: 20,
              },
            ],
          },
          // {
          //   type: "gauge",
          //   center: ["50%", "60%"],
          //   startAngle: 200,
          //   endAngle: -20,
          //   min: 0,
          //   max: 60,
          //   itemStyle: {
          //     color: "#FD7347",
          //   },
          //   progress: {
          //     show: true,
          //     width: 8,
          //   },
          //   pointer: {
          //     show: false,
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     show: false,
          //   },
          //   detail: {
          //     show: false,
          //   },
          //   data: [
          //     {
          //       value: 20,
          //     },
          //   ],
          // },
        ],
      };

      option && myChart.setOption(option);
    },
    getList() {
      getPersonalReport(Object.assign({ id: this.$route.query.id })).then(
        (res) => {
          const data = res.data.data;
          this.headerData = data;
          this.infoList = data.infoList;
          this.data = data.factorList;

          let factor = "";

          this.data.map((item) => {
            if (item.factorName == "霍兰德代码") {
              factor =
                item.totalRemark.length > 0
                  ? item.totalRemark.replace("（", "").replace("）", "")[0]
                  : "";
              this.code = item.totalRemark;
            }
          });

          let that = this;

          this.data.map((item) => {
            if (item.abbreviation == factor) {
              that.factor.push(item);
            }
          });

          if (data.tool.indexOf("霍兰德专业倾向测评量表") !== -1) {
            this.getOtherData();
            return;
          }
          let xAxisData = [];
          let seriesData = [];
          for (let i = 0; i < data.factorList.length; i++) {
            let rowData = data.factorList[i];
            if (
              rowData.factorName !== "总分" &&
              rowData.factorName !== "总均分" &&
              rowData.factorName !== "阳性项目数" &&
              rowData.factorName !== "综合型" &&
              rowData.factorName !== "霍兰德代码"
            ) {
              // xAxisData.push({ name: rowData.factorName, max: 15 }); //雷达图
              xAxisData.push(rowData.factorName);
              seriesData.push(rowData.score);
            }
          }
          // this.getChartInfo(xAxisData.reverse(), seriesData.reverse()); //雷达图
          this.$nextTick(() => {
            // this.getBarChartInfo(xAxisData, seriesData);
          });
        }
      );
    },
    getOtherData() {
      let list = [];
      this.list.map((item) => {
        this.data.map((item2) => {
          if (item2.factorName.indexOf(item) > -1) {
            list.push(item2);
          }
        });
      });
      this.data = list;
      let xAxisData = [];
      let seriesData = [];
      for (let i = 0; i < this.data.length; i++) {
        let rowData = this.data[i];
        if (
          rowData.factorName !== "总分" &&
          rowData.factorName !== "总均分" &&
          rowData.factorName !== "阳性项目数" &&
          rowData.factorName !== "综合型" &&
          rowData.factorName !== "霍兰德代码"
        ) {
          xAxisData.push({ name: rowData.factorName, max: 15 }); //雷达图
          // xAxisData.push(rowData.factorName);
          seriesData.push(rowData.score);
          this.sortListData.push({
            name: rowData.factorName,
            score: rowData.score,
          });
        }
      }
      this.sortListData.sort(this.compare);
      this.$nextTick(() => {
        this.getChartInfo(xAxisData.reverse(), seriesData.reverse()); //雷达图
      });
      let index = 0;
      this.sortListData.map((item) => {
        if (index < 3) {
          this.codeInfo += item.name.substr(item.name.indexOf("(") + 1, 1);
        }
        index++;
      });
      console.log(this.codeInfo);
    },
    compare(obj1, obj2) {
      var val1 = obj2.score;
      var val2 = obj1.score;
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    },
    handleDown() {
      this.$router.push({
        path: "/personalEvaluation/personalReportPDF",
        query: {
          id: this.$route.query.id,
        },
      });
      // htmlToPdf.downloadPDF(
      //   document.querySelector("#exportPersonal"),
      //   this.headerData.realName +
      //     "-" +
      //     this.$route.query.projectName +
      //     "-个人分析报告"
      // );
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  div {
    text-indent: 32px;
  }
}
.minWidth {
  min-width: 50px;
}
#exportPersonal {
  background-color: #fff;
  /* width: 1000px; */
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}
.headerCss {
  font-weight: 800;
  color: white;
  background: #2196f3;
  padding: 8px 10px 8px 10px;
  margin-bottom: 10px;
  font-size: 20px;
}
.titleCss {
  background: gainsboro;
  height: 40px;
  /* margin-top: 20px; */
  margin-bottom: 10px;
}
.table_style td,
th {
  padding: 10px;
  font-size: 15px;
}
.textCenter {
  text-align: center;
}
.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.explain {
  text-indent: 32px;
}
</style>
